<template>
    <div class="add-inner-user">
<!--      <div class="type-select">-->
<!--        <div>特殊作业：</div>-->
<!--        <el-select placeholder="请选择">-->
<!--          <el-option>选项</el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div class="title1">通过证件类型或资质/角色进行查询：</div>-->
      <div class="user-transfer">
        <div class="transfer-area">
          <div class="transfer-area-title">待选区</div>
          <div class="transfer-area-content">
            <div class="transfer-area-filter">
              <el-input placeholder="搜索已选人员姓名" prefix-icon="Search"/>
            </div>
            <div class="transfer-area-list">
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                check-strictly
                default-expand-all
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps">
              </el-tree>
            </div>
          </div>
        </div>
        <div class="transfer-operate">
          <el-button icon="DArrowRight"/>
          <el-button icon="DArrowLeft"/>
        </div>
        <div class="transfer-area">
          <div class="transfer-area-title">已选区</div>
          <div class="transfer-area-content">
            <div class="transfer-area-filter">
              <el-input placeholder="搜索已选人员姓名" prefix-icon="Search"/>
            </div>
            <div class="transfer-area-list">
              <GroupUser/>
              <GroupUser/>
              <GroupUser/>
              <GroupUser/>
              <GroupUser/>
            </div>
            <div class="selected-total">
              共计已选：<span class="selected-total-num">{{ 5 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import GroupUser from "../componens/GroupUser.vue";
import {defineProps} from "vue";
const data = [
    {
        id: 1,
        label: '一级 1',
        disabled: true,
        children: [{
            id: 4,
            label: '二级 1-1',
            disabled: true,
            children: [{
                id: 9,
                label: '三级 1-1-1',
                disabled: true,
            }, {
                id: 10,
                label: '三级 1-1-2',
                disabled: true,
            }]
        }]
    },
];
const defaultProps = {
    children: 'children',
    label: 'label',
};
const props = defineProps({
  info: {
    type: Object,
    default: () => null,
  },
})
const disabled = (data, node) => {
    return data.disabled
}
</script>

<style lang="less" scoped>
.add-inner-user {
  .type-select {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .title1 {
    margin-bottom: 5px;
  }
  .user-transfer {
    display: flex;
    align-items: center;
    .transfer-area {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 500px;
      .transfer-area-title {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #D6E5F5;
      }
      .transfer-area-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #f3f3f3;
        overflow: hidden;
        .transfer-area-filter {
          margin-top: 10px;
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;
          & > * {
            width: 100%;
          }
        }
        .transfer-area-list {
          flex: 1;
          margin: 10px 0;
          padding: 0 10px;
          overflow: auto;
          & .group-user-select:not(:last-child)::after {
            content: '';
            display: block;
            border-bottom: 1px solid #dbe7f6;
            margin: 20px 5px;
          }
        }
        .selected-total {
          border-top: 1px solid #bee6ff;
          padding: 10px;
          .selected-total-num {
            font-size: 16px;
            color: #2d8cf0;
          }
        }
      }


    }
    .transfer-operate {
      width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      & button {
        width: 40px;
        margin-left: 0;
        margin-bottom: 10px;
      }
    }
  }

}

//::v-deep .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
//  display: inline-block !important;
//}
//
//::v-deep .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
//  display: none !important;
//}
::v-deep :not(.is-leaf) + .is-disabled {
  display: none !important;
}
</style>
